<template>
  <div class="base-openlayer">
    <a-button-group class="btn-group">
      <a-button @click="zoomOut">Zoom out</a-button>
      <a-button @click="zoomIn">Zoom in</a-button>
    </a-button-group>
    <div class="map" id="map"></div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

@Component({
  components: {},
})
export default class BaseOpenlayer extends Vue {
  private map: any = null;
  public mounted() {
    this.createMap();
  }
  public zoomIn() {
    const view = this.map.getView();
    const zoom = view.getZoom();
    view.setZoom(zoom - 1);
  }
  public zoomOut() {
    const view = this.map.getView();
    const zoom = view.getZoom();
    view.setZoom(zoom + 1);
  }
  public createMap() {
    this.map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
  }
}
</script>
<style lang="less" scoped>
.base-openlayer
{
  width: 100%;
  height: calc(100vh - 247px);
}
.map  {
  width: 100%;
  height: calc(100% - 30px);
}
.btn-group {
  margin-bottom: 10px;
}
</style>